<template>
  <el-cascader
    v-model="id"
    :props="cascaderProps"
    :options="options"
    :placeholder="placeholder"
    :clearable="clearable"
    @change="queryChange"
  />
</template>

<script>
import { onMounted, nextTick, computed, ref } from "vue";
import { getApplyPlatformLabel as getOrgMapAPi } from "@/api/cascade";

export default {
  name: "ApplyPlatformCascader",
  props: {
    modelValue: {
      // 选中的值
      type: String,
      default: null,
    },
    isMultiple: {
      // 多选模式
      type: Boolean,
      default: false,
    },
    clearable: {
      // 可清除
      type: Boolean,
      default: false,
    },
    placeholder: {
      // 选中的部门
      type: String,
      default: '筛选申请平台',
    },
  },
  emits: ["update:modelValue","query-change"],
  setup(props, { emit }) {
    const id = computed({
      get: () => props.modelValue,
      set: (val) => emit("update:modelValue", val),
    })
    const cascaderProps = {
      label: 'name',
      value: 'nodeId',
      multiple: props.isMultiple,
      checkStrictly: true,
      emitPath: false
    };
    const queryChange = (val) => {
      emit('query-change', val)
    }
    const options = ref([])
    const getList = async() => {
      const res = await getOrgMapAPi()
      console.log(res)
      options.value = res.data

    }
    getList()
    return {
      queryChange,
      cascaderProps,
      options,
      id
    };
  },
};
</script>

<style lang="scss" scoped>
.org-select-dialog {
  display: grid;
  grid-template-columns: auto 200px;
  grid-template-rows: 40px 50vh;
  grid-gap: 20px;
  grid-template-areas:
    "header header"
    "optional selected";

  .header {
    grid-area: header;
    display: flex;
  }

  .optional {
    grid-area: optional;
    border: 1px solid #dcdfe6;

    :deep(.el-scrollbar__view) {
      padding: 0;

      .el-radio-group {
        width: 100%;
      }
    }

    ul {
      margin: 0;
      padding: 0;
      list-style-type: none;

      li {
        header {
          padding: 0 20px;
          display: flex;
          align-items: center;
          background: #dcdfe6;
          overflow: auto;
          font-size: 14px;
          line-height: 30px;

          .text {
            width: 200px;
          }
        }

        .options {
          padding: 0 20px;
          display: flex;
          flex-wrap: wrap;
          overflow: hidden;

          .el-checkbox,
          .el-radio {
            margin-right: 0;
            width: 25%;
            height: 40px;
            line-height: 40px;
            overflow: hidden;
          }
        }
      }
    }
  }

  .selected {
    grid-area: selected;
    border: 1px solid #dcdfe6;

    header {
      padding: 0 20px;
      height: 30px;
      line-height: 30px;
      background: #dcdfe6;
    }

    :deep(.el-scrollbar__view) {
      padding: 0;
    }

    .custom-tree-node {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 14px;
      padding-right: 8px;
    }
  }
}
</style>